<!-- 文章底部有详细的组件文档！！ -->
<!-- 文章底部有详细的组件文档！！ -->
<!-- 文章底部有详细的组件文档！！ -->
<template>
  <view>
    <!-- 头像裁剪组件(有一定高度,建议放置在合适位置) -->
    <Cropping
      @upload="doUpload"
      ref="cropping"
      selWidth="300upx"
      selHeight="300upx"
    />
    <!-- END -->

    <!-- 示例 -->
    <view class='imgs'>
      <view>
        <image :src="urls[0]" @click="clk(0)" class="myimg"></image>
        <view>自由移动</view>
      </view>
      <view>
        <image :src="urls[1]" @click="clk(1)" class="myimg"></image>
        <view>内部移动</view>
      </view>
    </view>

    <view class='imgs'>
      <view>
        <image :src="urls[2]" @click="clk(2)" class="myimg2"></image>
        <view>禁止旋转</view>
      </view>
      <view>
        <image :src="urls[3]" @click="clk(3)" class="myimg2"></image>
        <view>禁止缩放</view>
      </view>
    </view>

    <view class='imgs'>
      <view>
        <image :src="urls[4]" @click="clk(4)" class="myimg"></image>
        <view>短边铺满</view>
      </view>
      <view>
        <image :src="urls[5]" @click="clk(5)" class="myimg"></image>
        <view>短边锁定</view>
      </view>
    </view>
    <!-- END -->

    <!-- 当前图片 -->
    <!-- {{url}} -->
    <!-- END -->
  </view>
</template>

<script>
  // 引入组件
  import Cropping from "@/sheep/components/cropping/cropping.vue";
  export default {
    components: { Cropping },
    data() {
      return {
        // 默认显示的头像图片(地址失效自行更换)
        urls: [
          "https://img-blog.csdnimg.cn/a32fe3b9052a4717beb96b3479b6e8db.jpeg",
          "https://img-blog.csdnimg.cn/a32fe3b9052a4717beb96b3479b6e8db.jpeg",
          "https://img-blog.csdnimg.cn/a32fe3b9052a4717beb96b3479b6e8db.jpeg",
          "https://img-blog.csdnimg.cn/a32fe3b9052a4717beb96b3479b6e8db.jpeg",
          "https://img-blog.csdnimg.cn/a32fe3b9052a4717beb96b3479b6e8db.jpeg",
          "https://img-blog.csdnimg.cn/a32fe3b9052a4717beb96b3479b6e8db.jpeg"
        ],
        // 当前图片结果
        url: "",
      }
    },

    methods: {

      /**
       * 点击每个示例
       * @description 根据索引index判断操作
       * @param {Number} index - 索引
       * @return void
       */
      clk(index) {
        // console.log(index);
        switch(index) {
          // 自由移动
          case 0:
            this.$refs.cropping.fChooseImg(index,{
              selWidth: '350upx', selHeight: '350upx', inner: false
            });
            break;

          // 内部移动
          case 1:
            this.$refs.cropping.fChooseImg(index,{
              selWidth: '350upx', selHeight: '350upx', inner: true
            });
            break;

          // 禁止旋转
          case 2:
            this.$refs.cropping.fChooseImg(index,{
              selWidth: '350upx', selHeight: '350upx', inner: false, canRotate: false
            });
            break;

          // 禁止缩放
          case 3:
            this.$refs.cropping.fChooseImg(index,{
              selWidth: '350upx', selHeight: '350upx', canScale: false
            });
            break;

          // 短边铺满
          case 4:
            this.$refs.cropping.fChooseImg(index,{
              selWidth: '350upx', selHeight: '350upx', stretch: 'short'
            });
            break;

          // 短边锁定
          case 5:
            this.$refs.cropping.fChooseImg(index,{
              selWidth: '350upx', selHeight: '350upx', lock: 'short'
            });
            break;

          // 出现意外,来个默认
          default:
            this.$refs.cropping.fChooseImg(index,{
              selWidth: '350upx', selHeight: '350upx'
            });
            break;
        }
      },


      /**
       * 点击上传
       * @description 获取结果,裁剪完成
       * @param {Object} rsp - 结果,包含base64,blob对象等格式结果
       * @return void
       */
      doUpload(rsp) {
        // 常见的图片返回格式(如base64,blob对象),可提供给后端接口
        // 自己打印看看,不懂的去百度
        console.log(rsp);

        // 更新默认头像为上传裁剪后的图片
        this.$set(this.urls, rsp.index, rsp.path);

        // 更新当前图片
        this.url = rsp.path;

        return;
        // 自己上传给后端就行了,发起网络请求也行,看你自己的需求
        uni.uploadFile({
          url: 'xxx',
          filePath: rsp.path,
          name: 'avatar',
          formData: {
            'avatar': rsp.path
          },
          success: (uploadFileRes) => {
            console.log(uploadFileRes.data);
          },
          complete(res) {
            console.log(res)
          }
        });
      }
    },
  }
</script>

<style scoped>
  .imgs {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 30px;
    text-align: center;
  }
  .myimg {
    width: 240upx;
    height: 240upx;
    border-radius: 0 !important;
  }
  .myimg2 {
    width: 240upx;
    height: 240upx;
    border-radius: 100%;
  }
</style>
